<template>
	<view class="content" style="">
		<view class="A-item" style="">
			<view class="A-top" @click="show=!show"  style="">
				<view class="" style="">
					<view class="" style="">
						<uni-icons type="auth" color="#fff" size="20"></uni-icons>
					</view>
					<text style="margin: auto 0;margin-left: 30rpx;">修改昵称</text>
				</view>
				<uni-icons type="right" size="20"></uni-icons>
			</view>
			<view class="A-bottom" v-if="show" style="">
				<input class="uni-input" style=""  placeholder="" />
				<button class="mini-btn" type="primary" size="mini" style="">修改</button>
			</view>

		</view>
		<view class="A-item" style="">
			<view class="A-top" style="">
				<view class="" style="">
					<view class="" style="background-color: #9ec390;">
						<uni-icons type="auth" color="#fff" size="20"></uni-icons>
					</view>
					<text style="margin: auto 0;margin-left: 30rpx;">头像昵称</text>
				</view>
				<uni-icons type="right" size="20"></uni-icons>
			</view>
		</view>
		<view class="A-item" style="">
			<view class="A-top" style="">
				<view class="" style="">
					<view class="" style="background-color: #e2a0d1;">
						<uni-icons type="auth" color="#fff" size="20"></uni-icons>
					</view>
					<text style="margin: auto 0;margin-left: 30rpx;">背景修改</text>
				</view>
				<uni-icons type="right" size="20"></uni-icons>
			</view>
		</view>
		<view class="A-item" style="">
			<view class="A-top" style="">
				<view class="" style="">
					<view class="" style="background-color: #ffab62;">
						<uni-icons type="auth" color="#fff" size="20"></uni-icons>
					</view>
					<text style="margin: auto 0;margin-left: 30rpx;">性别</text>
				</view>
				<uni-icons type="right" size="20"></uni-icons>
			</view>
		</view>
		<view class="A-item" style="">
			<view class="A-top" style="">
				<view class="" style="">
					<view class="" style="background-color: #94c3b0;">
						<uni-icons type="auth" color="#fff" size="20"></uni-icons>
					</view>
					<text style="margin: auto 0;margin-left: 30rpx;">生日</text>
				</view>
				<uni-icons type="right" size="20"></uni-icons>
			</view>
			<view class="A-bottom" v-if="show" style="">
				<input class="uni-input" style=""  placeholder="" />
				<button class="mini-btn" type="primary" size="mini" style="">修改</button>
			</view>
		
		</view>
		<view class="A-item" style="">
			<view class="A-top" style="">
				<view class="" style="">
					<view class="" style="background-color: #c3bf91;">
						<uni-icons type="auth" color="#fff" size="20"></uni-icons>
					</view>
					<text style="margin: auto 0;margin-left: 30rpx;">简介</text>
				</view>
				<uni-icons type="right" size="20"></uni-icons>
			</view>
			<view class="A-bottom" v-if="show" style="">
				<input class="uni-input" style=""  placeholder="" />
				<button class="mini-btn" type="primary" size="mini" style="">修改</button>
			</view>
		
		</view>
		<view class="A-item" style="">
			<view class="A-top" style="">
				<view class="" style="">
					<view class="" style="background-color: #818b8c;">
						<uni-icons type="auth" color="#fff" size="20"></uni-icons>
					</view>
					<text style="margin: auto 0;margin-left: 30rpx;">对话设置</text>
				</view>
				<uni-icons type="right" size="20"></uni-icons>
			</view>
		</view>
		<view class="A-item" style="">
			<view class="A-top" style="">
				<view class="" style="">
					<view class="" style="background-color: #898cbd;">
						<uni-icons type="auth" color="#fff" size="20"></uni-icons>
					</view>
					<text style="margin: auto 0;margin-left: 30rpx;">评论设置</text>
				</view>
				<uni-icons type="right" size="20"></uni-icons>
			</view>
			
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.content{
	background-color: #fff;height: 100vh;
	.A-item{
		padding: 20rpx;
		.A-top{
			padding: 20rpx;border-bottom: #eaeaea 1rpx solid;display: flex;justify-content: space-between;
			view{
				display: flex;
				view{
					height: 40rpx;width: 40rpx;background-color: #a1f0f1;border-radius: 50%;padding: 10rpx;
				}
				
				text{
					font-size: 24rpx;color: #747474;
				}
			}
		}
		.A-bottom{
			box-sizing: border-box;padding: 20rpx;border-bottom: #eaeaea 1rpx solid;display: flex;
			.uni-input{
				background-color: #e8e8e8;width: 70%;text-align: center;padding: 10rpx 0;
			}
			.mini-btn{
				color:#ffffff;background-Color:#5ea7ff;
			}
		}
	}
}
</style>
